import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
import Home from '@/views/home'
import About from '@/views/about'
import Error from '@/views/error'
import Login from '@/views/login'
import store from '@/store/index'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
    // 此处可以加一个功能：当你是登陆状态时，地址输入/login是不能跳转到登录页的
  },
  {
    path: '/',
    name: '',
    component: Layout,
    meta: {
      requireAuth: true
    }, //
    children: [{
      path: '',
      name: 'home',
      component: Home,
      meta: {
        requireAuth: true
      }
    }, {
      path: 'about', // path和path拼接成'/about'
      name: 'about',
      component: About,
      // meta的作用：vue-router路由元信息就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可
      meta: {
        requireAuth: true
      }
    }]
  },

  // 路由匹配不到的页面
  {
    path: '*',
    // 表示所有的路由都显示该组件，但匹配规则又是从上往下匹配的，存在的地址则匹配上面存在的路由，匹配不到的则显示error页面
    name: 'error',
    component: Error
  }

]

const router = new VueRouter({
  routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // console.log(to)
  /* 1.注意：to.matched是一个数组，数组中是匹配到的路由对象，遍历数组，只要有任意一个路由对象需要验证登录状态，就代表
  需要验证（父级路由需要控制，控制父级下的子级，不管子级是否设置，也都需要验证） */
  /* 2.注意：接下来就要看数组中每个元素的meta属性里面是否有requireAuth且为 true */
  // some 一个为真结果则为true
  if (to.matched.some(item => item.meta.requireAuth)) {
    // 这个路由需要检查一下
    if (!store.state.tokenInfo) {
      // 没登录 跳转到登录页
      next({
        name: 'login',
        // query记录当前你要跳转的位置
        // 理解：你要跳转某页时没有权限，让你强制跳转到登录页，登录成功后，再让你返回到原来想要跳转的页面
        // query就可以实现该功能，并且会在地址栏中显示出来
        query: {
          redirect: to.fullPath// to.fullPath就是完整的路径
        }
      })
      return
    }
  }
  // if(to.path==='/about')
  next() // 必须调用
})

export default router
